<!--
 * @Author: fengxx
 * @Date: 2025-10-21 16:48:18
 * @LastEditors: fengxx
 * @LastEditTime: 2025-10-22 11:07:17
-->
<!--
通过内建的 <TransitionGroup> 实现“FLIP”列表过渡效果。
https://aerotwist.com/blog/flip-your-animations/
-->

<script lang="ts">
import { shuffle } from 'lodash-es'
import axios from 'axios'

const getInitialItems = () => [1, 2, 3, 4, 5]
let id = getInitialItems().length + 1

export default {
  name: 'ChildTest',
  data() {
    return {
      items: getInitialItems(),
    }
  },
  methods: {
    insert() {
      const i = Math.round(Math.random() * this.items.length)
      this.items.splice(i, 0, id++)
    },
    reset() {
      this.items = getInitialItems()
      id = getInitialItems().length + 1
    },
    shuffle() {
      this.items = shuffle(this.items)
    },
    remove(item: number) {
      const i = this.items.indexOf(item)
      if (i > -1) {
        this.items.splice(i, 1)
      }
    },
  },
  mounted() {
    axios
      .get(
        'https://mock.mengxuegu.com/mock/6888141205d8245baf88ff7e/example/home/getVisitTypeDatas',
        {
          // headers: {
          //   'Content-Type': 'application/json;charset=UTF-8',
          // },
        },
      )
      .then((response) => {
        console.log(response.data.data)
        // this.userList = response.data.data // 假设你的数据结构是这样的 {'status': 200, 'data': []}
      })
      .catch((error) => {
        console.error('There was an error!', error)
      })
  },
}
</script>

<template>
  <button @click="insert">Insert at random index</button>
  <button @click="reset">Reset</button>
  <button @click="shuffle">Shuffle</button>

  <TransitionGroup tag="ul" name="fade" class="container">
    <li v-for="item in items" class="item" :key="item">
      {{ item }}
      <button @click="remove(item)">x</button>
    </li>
  </TransitionGroup>
</template>

<style>
.container {
  position: relative;
  padding: 0;
  list-style-type: none;
}

.item {
  width: 100%;
  height: 30px;
  background-color: #f3f3f3;
  border: 1px solid #666;
  box-sizing: border-box;
}

/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

/* 3. 确保离开的项目被移除出了布局流
      以便正确地计算移动时的动画效果。 */
.fade-leave-active {
  position: absolute;
}
</style>
